<template>
  <div class="print-container">

    <div id="download">
      <div style="width: 1050px;margin: auto;text-align: center;" id="print">
        <div class="title-box" style="padding: 20px 0;">
          <div class="title" style="font-size: 20px;font-weight: bold;">{{ schemeName }}</div>
          <div class="stu-info">
            <span>姓名:</span>
            <span>{{ user.name }}</span>
            <span class="stu-info">科类:</span>
            <span v-if="infos.majorType == 1">理科</span>
            <span v-if="infos.majorType == 2">文科</span>
            <span v-if="infos.majorType == 3">艺术理</span>
            <span v-if="infos.majorType == 4">艺术文</span>
            <span v-if="infos.majorType == 5">体育理</span>
            <span class="stu-info">批次:</span>
            <span>{{ batch }}</span>
            <span class="stu-info">分数:</span>
            <span>{{ user.score }}</span>
            <span class="stu-info">位次:</span>
            <span>{{ user.precedence }}</span>
          </div>
        </div>
        <div class="table-section">
          <table border style="width: 100%;" id="tableOne">
            <thead>
            <tr>
              <th width="50">序列</th>
              <th width="60">代码</th>
              <th width="770">院校名称(录取形式)/专业(类)|包含专业及其等级</th>
              <th width="50">计划</th>
              <th width="100">学费(元/年)</th>
            </tr>
            </thead>
            <tbody v-for="zhi in tableData">
            <tr style="background-color: #d4d4d4;">
              <td style="text-align: center;font-weight:bolder;">{{ zhi.schemeName }}</td>
              <td style="text-align: center;font-weight:bolder;">{{ zhi.schoolCode }}</td>
              <td>
                <div style="text-align: left;display: inline-block;width: 50%;">
                  <span style="margin-left: 10px;font-weight:bolder;">{{ zhi.schoolName }}</span>
                </div>
                <div style="text-align: right;display: inline-block;width: 50%;" v-show="zhi.schoolName">
                  <span style="font-weight:bolder;" v-if="zhi.batch != '提前批A段' && zhi.batch != '提前批B段' && zhi.batch != '提前批C段' && zhi.batch != '提前批专科' && zhi.batch != '一批特殊' && zhi.batch != '二批特殊'">
                    {{ zhi.majorPlan }}|
                  </span>
                  <span style="margin-right: 10px;font-weight:bolder;">服从调剂：{{ zhi.schemeChange == 0 ? "是" : "否" }}</span>
                </div>
              </td>
              <td style="text-align: center;font-weight:bolder;">{{ zhi.plan2022 }}</td>
              <td></td>
            </tr>
            <tr v-for="zy in zhi.majorList">
              <td style="text-align: center;">{{ zy.sort }}</td>
              <td style="text-align: center;">{{ zy.majorCode }}</td>
              <td style="text-align: left;">
                <span style="margin-left: 10px;display: inline-block;margin-right: 10px;">{{ zy.majorName }}</span>
              </td>
              <td style="text-align: center;">{{ zy.plan2018 }}</td>
              <td style="text-align: center;">{{ zy.majorLimit }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="right-btn-box">
      <el-button style="background-color: #f96630;" circle v-print="'#print'">打印</el-button>
      <el-button style="background-color: #67C23A;" circle @click="getPdf('#download')">下载</el-button>
      <el-button style="background-color: #7870b6;" circle @click="goToAdministration()">上一级</el-button>
    </div>

  </div>
</template>

<script>
import {
  request
} from "@/util/request.js"
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  inject: ['reload'],
  data() {
    return {
      schemeName: '',
      loading: false,


      batch: '',
      infos: [],
      tableData: [],
      stuId: '',
      user: [],

      pdfName: '',
      majorList: [],
      setIds: [],
      dropList: [{
        value: '1',
        label: '志愿A'
      },
        {
          value: '2',
          label: '志愿B'
        },
        {
          value: '3',
          label: '志愿C'
        },
        {
          value: '4',
          label: '志愿D'
        },
        {
          value: '5',
          label: '志愿E'
        },
        {
          value: '6',
          label: '志愿F'
        },
        {
          value: '7',
          label: '备选'
        },
        {
          value: '8',
          label: '取消'
        },
      ],
      zyList: [{
        value: '1',
        label: '专业1'
      },
        {
          value: '2',
          label: '专业2'
        },
        {
          value: '3',
          label: '专业3'
        },
        {
          value: '4',
          label: '专业4'
        },
        {
          value: '5',
          label: '专业5'
        },
        {
          value: '6',
          label: '专业6'
        },
        {
          value: '7',
          label: '备选'
        },
        {
          value: '8',
          label: '取消'
        },
      ],
    }
  },
  methods: {
    getPdf(url) {
      window.open(`${this.$constants.serverUrl}/mendaoVoluntary/stuScheme/getSchemePdf?stuId=` + this.stuId + "&programmeId=" + this.infos.programmeId + "&batch=" + this.infos.batch);
      return;
      var title = this.pdfName
      html2Canvas(document.querySelector(url), {
        allowTaint: true,
        taintTest: false,
        logging: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 1.5, //将分辨率提高到特定的DPI 提高四倍
        // dpi:300,
        scale: 1.5 //按比例增加分辨率
      }).then(canvas => {
        var pdf = new JsPDF('p', 'mm', 'a4');    //A4纸，纵向

        var ctx = canvas.getContext('2d'),
            a4w = 240, a4h = 260,    //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
            imgHeight = Math.floor(a4h * canvas.width / a4w),    //按A4显示比例换算一页图像的像素高度
            renderedHeight = 0;
        ctx.mozImageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.msImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        while (renderedHeight < canvas.height) {
          var page = document.createElement("canvas");
          page.width = canvas.width;
          page.height = Math.min(imgHeight, canvas.height - renderedHeight);//可能内容不足一页

          //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
          page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
          pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', -15, 10, a4w, Math.min(a4h, a4w * page.height / page.width));    //添加图像到页面，保留10mm边距

          renderedHeight += imgHeight;
          if (renderedHeight < canvas.height) {
            pdf.addPage();//如果后面还有内容，添加一个空页
          }
        }
        //保存文件
        pdf.save(title + '.pdf')

      })
    },
    zyb() {
      let sortList = []
      let bList = []
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].schemeName == "备选") {
          bList.push(this.tableData[i])
        } else {
          sortList.push(this.tableData[i])
        }
      }
      bList.forEach(i => {
        sortList.push(i)
      })
      this.tableData = sortList
      for (let m = 0; m < this.tableData.length; m++) {
        let sortList = []
        let bList = []
        for (var i = 0; i < this.tableData[m].majorList.length; i++) {
          if (this.tableData[m].majorList[i].sort == "备选") {
            bList.push(this.tableData[m].majorList[i])
          } else {
            sortList.push(this.tableData[m].majorList[i])
          }
        }
        bList.forEach(i => {
          sortList.push(i)
        })
        this.tableData[m].majorList = sortList
      }
    },
    goToAdministration() {
      this.$router.push({
        path: '/design/management'
      })
    },
    getScheme() {
      request({
        method: 'POST',
        url: 'stuScheme/getScheme',
        params: {
          stuId: this.stuId,
          programmeId: this.infos.programmeId,
          batch: this.infos.batch
        }
      }).then(res => {
        this.tableData = res.data
        this.batch = this.tableData[0].batch
        for (let i = 0; i < res.data.length; i++) {
          this.tableData[i].majorList = res.data[i].majorList ? JSON.parse(res.data[i].majorList) :
              []
        }
        const user = localStorage.getItem("stu");
        this.user = JSON.parse(user)
        this.schemeName = this.tableData[0].programmeName;
        this.pdfName = this.user.name + '_' + this.tableData[0].programmeName;
        this.zyb()
      })
    },
  },
  created() {
    this.infos = this.$route.params.info
    this.infos = JSON.parse(localStorage.getItem('SingleScheme'))
    const user = localStorage.getItem("stu");
    this.user = JSON.parse(user)
    this.stuId = this.user.id
    this.timer = setTimeout(() => {   //设置延迟执行
      this.getScheme()
    }, 1000);

  }
}
</script>

<style scoped>


#tableOne {
  font-size: 15px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-collapse: collapse;
  border-spacing: 13;
}


@media print {
  #print {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
    transform: translate(-110px);
    border: solid 1px #fff;
  }

}


</style>

<style lang="stylus">
.print-container
  .el-table th.el-table__cell
    background-color: #f0f0f0;

  .el-table__expanded-cell[class*=cell]
    padding: 0;

  .right-btn-box
    .el-button
      width: 60px;
      height: 60px;
      padding: 0;
      margin-bottom: 20px;
      text-align center
      color: #fff;

    .el-button + .el-button
      margin-left: 0;
</style>
<style lang="stylus" scoped>
pageWidth = 1400px
$color-theme = #f96630
.print-container
  width: pageWidth;
  min-height: BodyMinHeight;
  margin: 0 auto;
  font-size: 16px;

  #print table tr
    page-break-inside: avoid;

  .title-box
    padding: 20px 0;
    line-height: 40px;
    text-align: center;

    .title
      font-size: 20px;
      font-weight: bold;

    span
      font-size: 16px;
      margin-left: 5px;

    .stu-info
      margin-left: 30px;

  .table-section
    width: 1050px;
    padding-bottom: 40px;
    margin: 0 auto;
    font-size: 15px;

    table
      border-top: 1px solid #999;
      border-left: 1px solid #999;
      border-collapse: collapse;
      border-spacing: 0;

      tr
        page-break-inside: avoid;

      th, td
        height: 40px;

  .right-btn-box
    position: fixed;
    top: 50%;
    margin-top: -120px;
    right: 10px;
    width: 60px;
</style>
